이미지 크기가 클 경우 렌더링 속도 개선

❓질문

이미지 크기가 클 경우 렌더링 속도가 느려질 텐데, 이를 개선하기 위한 방법들을 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

첫번째로 lazy.loading을 생각 할수 있습니다 이는 속성 loading에서 "lazy"값을 주면 구현할 수 있으며 사용자가 화면을 스크롤할때 해당위치에 도달하면 이미지 속성을 불러옵니다.

두번째로 이미지 파일의 포맷을 바꾸는 방법입니다 JPEG PNG 방식말고 압축효율이 좋은 Webp 포맷방식을 활용하여 파일의 크기를 많이 줄여줄수있습니다 이 방법을 사용하는 웹앱중에 디스코드 라는 예가 있습니다.

🏫 정리한 내용

이외의 방법만 정리하자면

이미지 사이즈 조정이 있습니다 화면에 노출되는 크기에 비해 이미지가 과도하게 큰경우 필요한 크기에 맞게 잘라 서버에서 내려줄 수 있습니다. srcset 과 sizes 속성을 활용하여 구현할 수 있습니다.

마지막으로 CDN입니다 CDN을 적용하면 사용자가 지리적으로 가까운 서버에서 이미지를 다운하게 되어 로딩 속도를 단축시킬 수 있스빈다.

WebP나 AVIF는 모든 브라우저에서 지원하지 않는다고 합니다 이 호환성 문제의 해결방법을 알려주세요.

호환성 문제를 대비하기 위해 HTML의 picture요소를 통해 fallback이미지를 적용할 수 있습니다. picture 요소 내부에 WebP나 AVIF와 같은 고효율 포맷을 우선 설정하고 브라우저가 이를 지원하지 않을 경우 JPEG나 PNG와 같은 기본 포맷을 로드 하도록 할 수 있습니다.

구체적인 예시로는 아래와 같습니다

<picture>
	<source srcset="image.avif" type="image/avif" />
	<source srcset="image.webp" type="image/webp" />
	<img src="image.jpg" alt="Image description" />
</picture>